<template>
  <div>
     <el-card>
        <el-form inline>

          <el-form-item label="姓名:" class="mgb-0">
            <el-input v-model="xName"></el-input>
          </el-form-item>
          <el-form-item label="地址:" class="mgb-0">
            <el-input v-model="xAddress"></el-input>
          </el-form-item>
          <el-form-item class="mgb-0">
            <el-button type="primary" icon="el-icon-search" @click="searchData"></el-button>
            <el-button type="success" icon="el-icon-refresh" @click="clearData"></el-button>
          </el-form-item>
        </el-form>
      </el-card>
  <el-row  style="height: 100%">
 <el-col>
    <el-card style="margin-top: 10px"> 
      <el-header style="font-size: 12px">
     <el-button type="success" @click="handleAdd" icon="el-icon-plus">新增</el-button>
     <el-button type="success"  @click="batchEnable(0)"  icon="el-icon-edit">批量启用</el-button>
     <el-button type="warning"  @click="batchEnable(1)" icon="el-icon-edit">批量禁用</el-button>
          <el-button type="danger"  @click="batchEnable(2)" icon="el-icon-delete">批量删除</el-button>
    </el-header>
     <el-table :data="dataList" v-loading="tableLoading"  ref="multipleTable" @row-click="handleRowClick" border>
        <el-table-column  label="选择" type="selection">
        </el-table-column>
         <el-table-column prop="xId" align="center" label="编号" show-overflow-tooltip v-if="false">
        </el-table-column>
        <el-table-column prop="xNumber" align="center" label="编号" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="xDate" align="center" label="日期" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="xAddress" align="center" label="地址" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="xName" align="center" label="名称" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="xBeizhu" align="center" label="备注" show-overflow-tooltip>
        </el-table-column>
         <el-table-column prop="xDescription" align="center" label="状态" show-overflow-tooltip>
            <template slot-scope="scope">
                <el-tag v-if="scope.row.xDescription =='启用'" type="success">启用</el-tag>
                <el-tag v-if="scope.row.xDescription =='禁用'" type="danger">禁用</el-tag>
              </template>
        </el-table-column>
        <el-table-column prop="xSex" align="center" show-overflow-tooltip label="性别">
        </el-table-column>
        <el-table-column  label="操作" align="center" fixed="right">
           <template slot-scope="scope">
               <el-button type="text" @click.stop="openDetail(scope.row.xId)">详情</el-button>
              <el-button type="text" v-if="scope.row.xDescription === '禁用'" @click.stop="openEdit(scope.row.xId)">编辑</el-button>
            </template>
        </el-table-column>
      </el-table>
       <el-pagination style="float:right; margin: 10px 0;" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" :page-sizes="[10, 15, 20, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" prev-text="上一页" next-text="下一页" :total="totalRows">
          </el-pagination> 
          </el-card>
 </el-col>

  </el-row>
    
  <xuTestAddEdit  v-if="isShowAddEdit" :xId="xId" :status="status" @close="closeAddEdit"></xuTestAddEdit>
  <querySearch v-if="isQuerySearch" @close="closeQuerySearch"></querySearch>
  <!-- <xuTest1Detail v-if="isShowDetail" :xId="xId" @close="closeDetail"></xuTest1Detail> -->
  <!-- <xuTest1ShowAll v-if="isUpdate" :xId="xId" @close="closeUpdate"></xuTest1ShowAll> -->
  <!-- <add_xu v-if="showPage.add" @close="handle_close($event)"></add_xu> -->

</div>
</template>

<script>
import add_xu from "@/views/customer/components/add_xu";
import Group from "@/api/psyManage/Group";
import xuTest1 from "@/api/customer/xuTest1"
  export default {
    name:"xuTest1",
    components:{
         add_xu,
         Group,
        xuTestAddEdit: resolve => require(['./components/xuTestAddEdit'], resolve),
        querySearch: resolve => require(['./components/querySearch'], resolve),

  },
   watch: {
    filterText (val) {
      this.$refs.groupTree.filter(val);
    }
  },
    data() {
      const item = {
        date: '',
        name: '',
        address: ''
      };
      return {
        tableData: Array(20).fill(item),
         showPage: {
         add: false
      },
      defaultProps: {
        children: 'children',
        label: 'nodeName'
      },
      services: new xuTest1(),
      tableLoading: false,
      treeLoading: false,
      filterText: '',
      fGroupId:'',
      xName:'',
      xAddress:'',
      page: 1, //当前页面
      pageSize: 10, // 当前页数
      totalRows: 0, // 总条数
      isShowDetail:false,
      dataList: [],
      isShowAddEdit : false,
      isQuerySearch : false,
      fGroupId: 0
    };
  },
  async created () {
    let  returnResultList = await this.services.getEnum({sysName:"tie-demo",className:"cn.hxlc.tie.demo.core.enums.StatusEnum"})
    this.returnResultList = returnResultList.data;
    this.getData();
  },
     methods: {
        getData () {
      let http = new xuTest1()
      this.tableLoading = true
      let data = {
        xId: this.xId,
        xName: this.xName,
        xBeizhu: this.xBeizhu,
        xNumber: this.xNumber,
        xCount:this.xCount,
        xSex:this.xSex,
        xDate:this.xDate,
        pageSize: this.pageSize,
        page: this.page,
        xDescription:this.xDescription,
        xAddress: this.xAddress,
        fGroupId: this.fGroupId
      }
      http.queryListPage(data).then(res => {
        this.dataList = res.data.rows
        this.page = res.data.page
        this.pageSize = res.data.pageSize
        this.totalRows = res.data.totalRows
        this.tableLoading = false
      })
    },
    searchData() {
      this.page = 1
      this.getData()
    },
    clearData(){

      this.fGroupId=null

      this.xSex=null
    },
       handleRowClick (row, column, event) {
      this.$refs.multipleTable.toggleRowSelection(row)
    },
    
   
    async refreshAll () {
        this.treeLoading = true
    this.xId = 0
    this.getData();
    this.treeLoading = false
    },
      handleAdd(){
         this.xId = 0
         this.status = 'add'
         this.isShowAddEdit = true; 
       },
       querySearch(){
         this.isQuerySearch = true;
       },
       handleCurrentChange (page) {
      this.page = page
      this.getData()
    },
        handleSizeChange (pageSize) {
      this.pageSize = pageSize
      this.getData()
    },
    batchEnable (xDescription) {
      var fids = this.getSelectIdByTable();
      if (fids.length == 0) {
        this.$message.error('未选中数据!')
      } else {
        const loading = this.$loading({
          lock: true,
          text: `批量操作中，请耐心等待.....`,
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        this.services.batchChangeState({ "xId": fids, "xDescription": xDescription }).then(res => {
          this.$tie.showSuccess(res.message)
          loading.close();
          this.getData();
        }).catch(e => {
          loading.close();
        })
      }
    },
    getSelectIdByTable () {
      console.info(this.$refs.multipleTable)
      var batchChoose = this.$refs.multipleTable.selection;
      var fids = [];
      for (var i = 0; i < batchChoose.length; i++) {
        fids[i] = batchChoose[i].xId;
        
      }
      return fids;
    },
       closeAddEdit(isOk){
        this.isShowAddEdit = false
        this.xId = 0
        if(isOk){
            this.getData()
        }
      },

      closeQuerySearch(isOk){
    this.isQuerySearch = false
        
        if(isOk){
            this.getData()
        }
      },
     openDetail(id){
        this.xId = id
        this.status = 'view'
        this.isShowAddEdit = true
      },
      openEdit(id){
       this.xId = id
        this.status = 'edit'
        this.isShowAddEdit = true
      },
     }
  };
</script>

<style scoped lang="scss" >
/deep/.tree-scroll {
  height: 93%;
  overflow: scroll;
}
/deep/ .el-card__body {
  height: 100%;
}
</style>